<template>
    <div class="flex flex_column" style="height: 100%;" >
        <div class="cell flex_1 scll" style="overflow: auto;">
            <div style="margin-bottom: 24px;" class="flex align_center justify_between" v-for="(item,index) in formItem" :key="index">
                <div class="flex align_center" >
                    <div>费用类型：</div>
                    <a-select v-model="item.price_type" :options="priceTypeList" :filter-option="filterOption" :field-names="{value: 'key', label: 'title'}" :style="{width:'140px'}" placeholder="请选择" allow-search allow-clear />
                </div>
                <div class="flex align_center" >
                    <div>收入金额结算比例：</div>
                    <a-input v-model="item.set_price" :style="{width:'140px'}" placeholder="请输入比例" allow-clear>
                        <template #suffix>
                            <div>%</div>
                        </template>
                    </a-input>
                </div>
                <div class="flex align_center" >
                    <div>供应商结算费率：</div>
                    <a-input v-model="item.tax_price" :style="{width:'140px'}" placeholder="请输入比例" allow-clear>
                        <template #suffix>
                            <div>%</div>
                        </template>
                    </a-input>
                </div>
                <div style="width: 100px;" class="flex align_center justify_center" >
                    <a-link v-if="index != 0" @click="handleDel(index)">删除</a-link>
                </div>
            </div>
            <div class="flex justify_end">
                <a-button type="primary" @click="handleAdd"> 新增 </a-button>
            </div>
        </div>
        <div class="flex justify_end" style="margin-top: 20px;">
            <a-button type="primary" @click="handleBaoCun">保存</a-button>
        </div>
    </div>
  </template>
  
  <script setup>
  import MaFormModal from "@/components/ma-form-modal/index.vue"
  import {ref,onMounted,defineProps,defineEmits} from "vue";
  import dept from "@/api/system/dept";
  import systemDeptPriceConfig from '@/api/system/systemDeptPriceConfig'
  import {Message} from "@arco-design/web-vue";
  import { pinyin } from "pinyin-pro"
  import { request } from "@/utils/request.js";
  import commonApi from "@/api/common";
  const props = defineProps({
    fromData:{
        default: {},
    }
  })
  const filterOption = (v,option)=>{
    return option.keywords.some(keywords=>keywords.includes(v))
  }
  const emits = defineEmits(['shuaxin'])
  const tab = ref(1)
  const updetaID = ref('')
  const priceTypeList = ref([])
  const formItem = ref([
    {
        price_type:'',   // 费用类型
        tax_price:'',   // 税额
        set_price:''   //  结算比例
    },
  ])
  onMounted(()=>{
    systemDeptPriceConfig.getList({dept_id:props.fromData.id}).then(res=>{
        if(res.data.items.length == 0){
            tab.value = 1
        }else{
            tab.value = 2
            formItem.value = res.data.items[0].price_config
            updetaID.value = res.data.items[0].id
        }
    })
    commonApi.getDict("price_type").then((res) => {
        res.data.map((v,i)=>{
                v.keywords = [
                v.title,
                pinyin(v.title,{toneType:'none',pattern:'first'}).split(' ').join(''),
                pinyin(v.title,{toneType:'none',pattern:'first'}).split(' ').join('').toUpperCase()
                ]
        })
        priceTypeList.value = res.data;
    })
  })
  const handleBaoCun = ()=>{
    if(tab.value == 1){
        systemDeptPriceConfig.save({dept_id:props.fromData.id,price_config:formItem.value}).then(res=>{
            Message.success('保存成功')
        })
    }else{
        systemDeptPriceConfig.update(updetaID.value,{dept_id:props.fromData.id,price_config:formItem.value}).then(res=>{
            Message.success('保存成功')
        })
    }
    emits('shuaxin')
  }
  const handleDel = (index)=>{
    formItem.value.splice(index, 1)
  }
  const handleAdd = ()=>{
    formItem.value.push({
        price_type:'',   // 费用类型
        tax_price:'',   // 税额
        set_price:''   //  结算比例
    })
  }
  
  </script>
  
  <style lang="less" scoped>
  .scll{
    scrollbar-width: none; /* 对于 Firefox 隐藏滚动条 */
  }
  .scll::-webkit-scrollbar {
    display: none; /* 对于 Chrome, Safari 和 Opera 隐藏滚动条 */
  }
  .cell{
    padding: 12px;
    border-radius: 12px;
    background: #f3f3f3;
    margin-bottom: 20px;
    &:last-child{
        margin-bottom: 0px;
    }
    .arco-input-wrapper{
        background: #fff;
        &:hover{
            background: #fff; 
        }
    }
    /deep/.arco-select-view-single{
        background: #fff;
        &:hover{
            background: #fff; 
        }
    }
    /deep/.arco-select-view-multiple{
        background: #fff;
        &:hover{
            background: #fff; 
        }
    }
  }
  </style>
  